import React, { Component } from 'react'
import axios from '../utils/request'
import { Icon } from 'react-vant';
import '../App.css'

export default class Order extends Component {
    state = {
        list: [],
        screen: "图文咨询",
        screenlist: [
            { text: "图文咨询", value: "图文咨询" },
            { text: "杂志", value: "杂志" },
            { text: "报刊", value: "报刊" },
            { text: "文娱", value: "文娱" }
        ],
        screen1: "电话咨询",
        screenlist1: [
            { text: "电话咨询", value: "电话咨询" },
            { text: "在线咨询", value: "在线咨询" },
        ],
        screen2: "其他服务",
        screenlist2: [
            { text: "其他服务", value: "其他服务" },
            { text: "私人医生", value: "私人医生" },
            { text: "商品订单", value: "商品订单" },
            { text: "服务助手", value: "服务助手" },
            { text: "院后指导", value: "院后指导" },
            { text: "预约就诊", value: "预约就诊" },
            { text: "视频预约", value: "视频预约" },
        ]
    }
    componentDidMount() {
        this.getList()
    }
    getList() {
        axios({
            url: '/orderlist',
            method: 'post'
        }).then(res => {
            this.setState({
                list: res.data.data
            })
        })
    }
    goback = () => {
        this.props.history.go(-1)
    }
    del = (id) => {
        axios({
            url: "/del",
            method: "delete",
            data: { id: id }
        }).then(res => {
            this.getList()
        })
    }
    area(screen) {
        axios({
            url: "/area",
            method: 'post',
            data: {
                screen: screen
            }
        }).then(res => {
            console.log(res);
            this.setState({
                list: res.data.data
            })
        })
    }

    area1(screen1) {
        axios({
            url: "/area",
            method: 'post',
            data: {
                screen1: screen1
            }
        }).then(res => {
            console.log(res);
            this.setState({
                list: res.data.data
            })
        })
    }

    area2(screen2) {
        axios({
            url: "/area",
            method: 'post',
            data: {
                screen2: screen2
            }
        }).then(res => {
            console.log(res);
            this.setState({
                list: res.data.data
            })
        })
    }
    render() {
        const { list, screenlist, screenlist1, screenlist2, screen, screen1, screen2 } = this.state
        return (
            <div className='order'>
                <div className='order_header'>
                    <li onClick={() => this.goback()}><Icon name="arrow-left" /></li>
                    <li>全部订单</li>
                    <li><Icon name="search" />搜索</li>
                </div>
                <div className='order_main'>
                    <div className='order_main_one'>
                        <li>
                            <select onChange={() => this.area(screen)}>
                                {
                                    screenlist.length && screenlist.map((item, index) => {
                                        return <option key={index} value={item.value}>
                                            {item.text}
                                        </option>
                                    })
                                }
                            </select>
                        </li>
                        <li>
                            <select onChange={() => this.area(screen1)}>
                                {
                                    screenlist1.length && screenlist1.map((item, index) => {
                                        return <option key={index} value={item.value}>
                                            {item.text}
                                        </option>
                                    })
                                }
                            </select>
                        </li>
                        <li>
                            <select onChange={() => this.area(screen2)}>
                                {
                                    screenlist2.length && screenlist2.map((item, index) => {
                                        return <option key={index} value={item.value}>
                                            {item.text}
                                        </option>
                                    })
                                }
                            </select>
                        </li>
                    </div>
                    <div className='order_main_two'>
                        {
                            list.length && list.map((item, index) => {
                                return <div key={index} className='time'>
                                    <img src={item.sking}></img>
                                    <div>
                                        <li>{item.skinge}</li>
                                        <li><span>￥{item.skprice}</span>&emsp;<span>{item.type}</span>&emsp;<span>{item.type1}</span>&emsp;<span>{item.type2}</span></li>
                                        <li><span onClick={() => this.del(item.id)}>删除订单</span></li>
                                    </div>
                                </div>

                            })
                        }
                    </div>
                </div>
            </div>
        )
    }
}
